<template>
	<view>
		<u-navbar title="发扫雷红包"></u-navbar>
		<view class="tip">{{tip}}</view>
		<view class="u-flex u-m-x-30 u-m-t-20">
			<view class="type">
				<text>{{type}}红包</text>
				<!-- <text class="iconfont icon-arrow-down u-m-l-10"></text> -->
			</view>
		</view>
		<view class="u-m-x-30 u-m-t-30">
			设置踩雷数字
		</view>
		<view class="opts u-m-t-20">
			<view class="item" :class="{cur:index==mine}" v-for="(item,index) in 10" :key="index" @tap="mine = index">
				<view class="num">{{index}}</view>
			</view>
		</view>
		<view class="group u-row-between u-m-t-30" :class="{error:count.error}" @tap="openCount">
			<view class="label u-flex">
				<image class="hb u-m-r-10" src="/static/images/red.png" mode="aspectFit"></image>
				<text class="u-font-32">红包个数</text>
			</view>
			<view class="value">
				<text class="u-font-32" :class="{'text-gray':!count.value}">{{count.value||'选择个数'}}</text>
				<text class="u-font-32 u-m-l-10">个</text>
			</view>
		</view>
		<view class="u-m-x-30 u-m-t-10 u-p-l-30">
			<text class="u-font-24 text-grey">本群共{{groupInfo.userCount}}人</text>
		</view>
		<view class="group u-row-between u-m-t-30" :class="{error:amount.error}" @tap="openAmount">
			<view class="label u-flex">
				<view class="pin u-m-r-10">
					拼
				</view>
				<text class="u-font-32">总金额</text>
			</view>
			<view class="value">
				<text class="u-font-32" :class="{'text-gray':!amount.value}">¥{{amount.value||'0.00'}}</text>
			</view>
		</view>
		<view class="u-flex u-row-around u-m-x-30 u-m-t-80">
			<view class="radius u-m-x-40 u-flex-1 u-p-y-20 u-font-32 bg-orange u-text-center" @tap="againLast">
				重复上期
			</view>
			<view class="radius u-m-x-40 u-flex-1 u-p-y-20 u-font-32 bg-orange u-text-center" @tap="randomMine">
				随机雷号
			</view>
		</view>
		<view class="total">
			<text class="rmb">¥</text>
			<text class="num">{{total}}</text>
		</view>
		<view class="submit" @tap="submit">
			发送红包
		</view>
		<u-select v-model="count.show" :list="count.list" @confirm="countChange"></u-select>
		<!-- <u-keyboard mode="number" @change="countChange" @backspace="countBackspace" v-model="count.show" :mask="false" :show-tips="false" :dot-enabled="false"></u-keyboard> -->
		<u-keyboard mode="number" @change="amountChange" @backspace="amountBackspace" v-model="amount.show" :mask="false" :show-tips="false"></u-keyboard>
	</view>
</template>

<script>
	import {toast} from "@/utils/util.js"
	import { sendRed , TYPES } from "@/api/red.js"
	import {mapGetters,mapMutations} from "vuex"
	import { delay } from "@/utils/util";
	import {get as getStorage ,set as setStorage} from "@/utils/storage.js"
	const lastKey = "cat_last_bomb_"
	import DC from "@/DC";
	export default {
		data() {
			return {
				bid:'',
				btype:'群',
				tip:'',
				type:TYPES.BOMB,
				mine:0,
				groupInfo:{userCount:0},
				count:{ 
					value:'',
					cur:null,
					list:[],
					show:false,
					error:false
				}, 
				amount:{ 
					value:'',
					show:false,
					error:false
				}, 
				lock:false
			};
		},
		computed:{
			...mapGetters('wallet',['assets']),
			...mapGetters('user',['userId']),
			...mapGetters('system',['mineQuan','mineRange']),
			total(){
				return Number(this.amount.value).toFixed(2)
			}
		},
		onLoad({bid}) {
			this.bid = bid
			this.groupInfo = DC.groupDB.getGroup(this.bid)
			if(!this.groupInfo.userCount){
				this.groupInfo.fetchOrigin()
			}
		},
		methods:{
			...mapMutations('wallet',['setCatMoney']),
			openCount(){
				this.count.show = true
				this.amount.show = false
				this.count.list = this.mineQuan.map(({num,odds})=>({label:num,value:odds}))
			},
			countChange([opt]){
				this.count.cur = opt
				this.count.value = opt.label
			},
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			openAmount(){
				this.count.show = false
				this.amount.show = true
			},
			amountChange(char){
				if(char=='.'&&!this.amount.value){
					char = '0.'
				}
				const value = this.amount.value+char
				const reg = /^\d{1,8}(\.\d{0,2})?$/
				if(!reg.test(value)){
					return 
				}
				this.amount.value = value
				this.check()
			},
			amountBackspace(){
				const value = this.amount.value.slice(0,this.amount.value.length-1)
				this.amount.value = value
				this.check()
			},
			check(){
				this.tip = ''
				this.count.error = false
				this.amount.error = false
				if(this.count.value){
					if(Number(this.count.value)<2){
						this.tip = '红包个数不可少于2个'
						this.count.error = true
					}
					
					
					
					
				}
				const count = Number(this.count.value)
				const amount = Number(this.amount.value)
				
				
				
				
				if(amount>this.mineRange.max){
					this.tip = `红包金额不可超过${this.mineRange.max}元`
					this.amount.error = true
				}
				if(count&&amount){
					
					
					
					
					
					if(amount/count<0.01){
						this.tip = '单个红包金额不可低于0.01元'
						this.amount.error = true
						this.count.error = true
					}
				}
			},
			async submit(){
				if(!Number(this.count.value)){
					this.tip = '请选择红包个数'
					this.count.error = true
					return
				}
				if(!Number(this.amount.value)){
					this.tip = '未填写「总金额」'
					this.amount.error = true
					return
				}
				this.check()
				const amount = Number(this.amount.value)
				if(amount<this.mineRange.min){
					this.tip = `红包金额不可低于${this.mineRange.min}元`
					this.amount.error = true
				}
				if(!!this.tip){
					return
				}
				if(this.lock){
					return
				}
				if(this.assets.catMoney-this.total<0){
					return uni.showModal({
						content:'余额不足,是否前往充值?',
						confirmText:'前往',
						success({confirm}){
							if(!confirm){
								return
							}
							uni.navigateTo({
								url:'/pages/wallet/payment'
							})
						}
					})
				}
				try{
					this.lock = true
					const info  = {
						type:this.type,
						brief:`${this.total}/${this.count.value}-${this.mine}`,
						toBizType:this.btype,
						toBizId:this.bid,
						totalAmount:this.total*100,
						totalPacket:Number(this.count.value),
						ext:JSON.stringify({
							mineList:[this.mine],
							odds:this.count.cur.value
						})
					}
					const id = await sendRed(info)
					setStorage(lastKey+this.userId,{
						amount:this.amount.value,
						count:this.count.cur,
						mine:this.mine
					})
					this.setCatMoney((this.assets.catMoney*100-Number(this.total)*100)/100)
					uni.$emit('bombCreated',{id,...info})
					uni.navigateBack()
				}finally{
					await delay(500)
					this.lock = false
				}
			},
			async againLast(){
				const last = await getStorage(lastKey+this.userId)
				if(!last){
					return toast('暂无上期数据')
				}
				this.mine = last.mine
				this.amount.value = last.amount
				this.count.cur = last.count
				this.count.value = this.count.cur.label
			},
			randomMine(){
				this.mine = Math.floor(Math.random()*10)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.tip{
		text-align: center;
		background-color: #cb9801;
		color: #ffffff;
	}
	.type{
		font-size: 30rpx;
		color: #e5b728;
	}
	.opts{
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: grid;
		grid-template-columns: repeat(5 , 1fr);
		grid-gap: 20rpx;
		.item{
			display: flex;
			justify-content: center;
		}
		.cur{
			.num{
				background-color: #ff3914;
				color: #ffffff;
			}
		}
		.num{
			font-size: 40rpx;
			text-align: center;
			line-height: 70rpx;
			width: 70rpx;
			height: 70rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
		}
	}
	.group{
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		&.error{
			color: #ff3914;
		}
		.hb{
			width: 44rpx;
			height: 44rpx;
		}
		.pin{
			width: 44rpx;
			height: 44rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 44rpx;
			border-radius: 6rpx;
			background-color: #e5b728;
			color: #ffffff;
		}
	}
	.total{
		text-align: center;
		margin-top: 50rpx;
		.rmb{
			vertical-align: middle;
			font-size: 50rpx;
		}
		.num{
			vertical-align: middle;
			font-size: 70rpx;
			margin-left: 10rpx;
		}
	}
	.textarea{
		width: 100%;
		max-height: 80rpx;
		overflow: scroll;
	}
	.submit{
		padding: 24rpx 0;
		background-color: #ff3914;
		color: #ffffff;
		font-size: 34rpx;
		font-weight: bold;
		border-radius: 20rpx;
		text-align: center;
		margin: 30rpx 200rpx 0;
	}
</style>
